<%--
  Created by IntelliJ IDEA.
  User: 申忠帅
  Date: 2021/4/14
  Time: 16:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
    <style>
        .td{
            text-align: right;
        }
        th{
            text-align: center;
        }
    </style>
</head>
<body>
<form action="product?opr=addSava" method="post" enctype="multipart/form-data">
    <table  align="center"  class="table  table-hover table-bordered">
        <tr>
            <td class="td">一级分类</td>
            <td>
                <select name="categoryLevel1Id" id="categoryLevel1Id">
                    <option>请选择..</option>
                    <c:forEach items="${list}" var="item">
                        <option id="one" value="${item.id}">${item.name}</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td class="td">二级分类</td>
            <td>
                <select name="two" id="two">
                    <option>请选择..</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="td">三级分类</td>
            <td>
                <select  name="three" id="three">
                    <option>请选择..</option>
                </select>
            </td>
        </tr>

        <tr>
            <td class="td">商品名称</td>
            <td>
                <input  class="select form-control" id="name" name="name">
            </td>
        </tr>

        <tr>
            <td class="td">商品图片</td>
            <td>
<%--                <img id="imgshow" src="/static/img/${product.fileName}" class="bitPic">--%>
                <input id="filed" type="file" class="select" name="fileName">
            </td>
        </tr>

        <tr>
            <td class="td">单价</td>
            <td>
                <input  class="select form-control" id="price" name="price">
            </td>
        </tr>

        <tr>
            <td class="td">库存</td>
            <td>
                <input class="select form-control" id="stock" name="stock">
            </td>
        </tr>

        <tr>
            <td class="td">描述</td>
            <td>
                <textarea class="form-control" id="description" name="description"></textarea>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <button type="submit" class=" btn btn-primary">商品上架</button>&nbsp;&nbsp;&nbsp;
            </td>
        </tr>
    </table>
</form>
`<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>`
<script>
    $("#categoryLevel1Id").change(function(){
        // alert($("#categoryLevel1Id").val())
        $.ajax({
            url: 'product?opr=two',
            type: 'post',
            async: false,
            data: {
                id:$("#categoryLevel1Id").val()
            },
            dataType: 'json',
            success: function (data) {
                // console.log(data)
                $("#two").empty();/* empty()方法是将标签option中的值置成空 */
                $("#two").append("<option>请选择..</option>");
                for (let i = 0;i<data.length;i++){
                    /* append()可以同时传入多个节点或字符串，没有返回值 */
                    $("#two").append("<option value="+data[i].id+">"+data[i].name+"</option>");
                }
            }
        })
    })

    $("#two").change(function(){
        $.ajax({
            url: 'product?opr=three',
            type: 'post',
            async: false,
            data: {
                ids:$("#two").val()
            },
            dataType: 'json',
            success: function (data) {
                $("#three").empty();
                $("#three").append("<option>请选择..</option>");
                for (let i = 0;i<data.length;i++){
                    $("#three").append("<option value="+data[i].id+">"+data[i].name+"</option>");
                }
            }
        })
    })
    // //在input file内容改变的时候触发事件
    // $('#filed').change(function(){
    //     //获取input file的files文件数组;
    //     //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
    //     //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
    //     var file = $('#filed').get(0).files[0];
    //     //创建用来读取此文件的对象
    //     var reader = new FileReader();
    //     //使用该对象读取file文件
    //     reader.readAsDataURL(file);
    //     //读取文件成功后执行的方法函数
    //     reader.onload=function(e){
    //         //读取成功后返回的一个参数e，整个的一个进度事件
    //         console.log(e);
    //         //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
    //         //的base64编码格式的地址
    //         $('#imgshow').get(0).src = e.target.result;
    //     }
    // })
    $("#submit").click(function () {
        $.ajax({
            url: '',
            type: 'post',
            data: {},
            dataType: 'json',
            success: function () {

            }
        })
    })
</script>
</body>
</html>
